<template>
  <div>
    <!-- 审批记录 -->
    <!-- <BreakSpace label="审批记录" :containerStyle="{ marginBottom: '10px' }"/> -->
    <BreakSpace label="审批记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns7"
      :dataSource="spList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns7 => this.columns7 = columns7"
    ></FilterTable>
    <!-- 跟进记录 -->
    <BreakSpace label="跟进记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns"
      :dataSource="gjList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns => this.columns = columns"
    ></FilterTable>
    <!-- 客流记录 -->
    <BreakSpace label="客流记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns2"
      :dataSource="klList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns2 => this.columns2 = columns2"
    ></FilterTable>
    <!-- 试驾记录 -->
    <BreakSpace label="试驾记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns3"
      :dataSource="sjList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns3 => this.columns3 = columns3"
    ></FilterTable>
    <!-- 报价记录 -->
    <BreakSpace label="报价记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns4"
      :dataSource="bjList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns4 => this.columns4 = columns4"
    ></FilterTable>
    <!-- 订单记录 -->
    <BreakSpace label="订单记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns5"
      :dataSource="ddList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns5 => this.columns5 = columns5"
    ></FilterTable>
    <!-- 回访记录 -->
    <BreakSpace label="回访记录"/>
    <FilterTable
      ref="table"
      height="auto"
      :columns="columns6"
      :dataSource="hfList"
      :isPagination='false'
      :isToperInfo='false'
      :isColumnFilter='false'
      :isSelectColumn='false'
      selectionType="single"
      :onColumnsChange="columns6 => this.columns6 = columns6"
    ></FilterTable>
  </div>
</template>

<script>
import {
  queryContactRecord,
  queryOrderRecord,
  queryVisitHsitory,
  getPotenCusById
} from '@/api/potenCus/customer/potenCusManage';
import { dictionary } from '@/utils/dictMixin';
import { formatDates, formatDuring } from '@/utils/validate';

export default {
  name: 'contactRecord',
  mixins: [dictionary],
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
      gjList: [],
      klList: [],
      sjList: [],
      bjList: [],
      ddList: [],
      hfList: [],
      spList: [],
      columns: this.createTableColumns(),
      columns2: this.createTableColumns2(),
      columns3: this.createTableColumns3(),
      columns4: this.createTableColumns4(),
      columns5: this.createTableColumns5(),
      columns6: this.createTableColumns6(),
      columns7: this.createTableColumns7(),
      customerBusinessId: ''
    }
  },
  mounted () {
    this.init()
  },
  activated(){
    this.init()
  },
  methods: {
    init () {
      console.log('接触记录有没有rowData',this.rowData)
      this.customerBusinessId = this.rowData['costomerBusinessId']
      this.potentialCustomerId = this.rowData['potentialCustomersId'];
      if (this.costomerBusinessId || this.customerBusinessId ) {
        this.queryContactList()
        this.queryVisitList()
      } else {
        console.log('这个人没有商机id, 是不是还没有接触')
      }
      if(this.potentialCustomerId){
        this.queryOrderList()
      }
    },
    async queryContactList() {
      const res = await queryContactRecord(this.customerBusinessId);
      console.log('查询跟进记录', res.data)
      if (res.resultCode === 200) {
        this.spList = res.data.auditDTOList
        this.gjList = res.data.actionedDTOList
        // this.gjList[0].timeLabel ='是'
        this.gjList.forEach((item, index)=>{
          console.log(111,item, index)
          if(index == 0){
            item.timeLabel ='是'
          } else{
            item.timeLabel ='否'
          }
        })
        this.klList = res.data.passengerFlowInfoDTOList
        this.sjList = res.data.testdrivePlanDetailDTOList
        this.bjList = res.data.customerPriceDTOList
      }
    },
    async queryOrderList() {
      const res = await queryOrderRecord(this.customerBusinessId);
      // const res = await queryOrderRecord(52);
      console.log('查询订单记录', res)
      if (res.resultCode === 200) {
        this.ddList = res.data
      }
    },
    async queryVisitList() {
      const res = await queryVisitHsitory(this.customerBusinessId);
      // console.log('查询回访记录', res)
      if (res.resultCode === 200) {
        this.hfList = res.data
      }
    },
    // 跟进记录
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '计划跟进时间',
          dataIndex: 'planActionDate',
          width: 150,
          align: 'center',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.planActionDate) } </span>
          }
        },
        {
          title: '实际跟进时间',
          dataIndex: 'factActionDate',
          width: 150,
          align: 'center',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.factActionDate) } </span>
          }
        },
        {
          title: '是否首次跟进',
          dataIndex: 'timeLabel',
          align: 'center',
          filterType: 'input',
          initialValue: ''
        },
        {
          title: '是否逾期',
          dataIndex: 'isOverdue',
          align: 'center',
          filterType: 'checkbox',
          render: props => {
            console.log(props.row.factActionDate,props.row.planActionDate, 'shijian')
            return <span>{((Number(props.row.factActionDate))-(Number(props.row.planActionDate)) >= 0 ? '是':'否')}</span>;
          }
        },
        {
          title: '逾期时长',
          dataIndex: 'overTime',
          align: 'center',
          width: 200,
          filterType: 'checkbox',
          render: props => {
            console.log('计划跟进时间',props.row.planActionDate)
            console.log('实际跟进时间',props.row.factActionDate)
            return <span>{ (Number(props.row.factActionDate))-(Number(props.row.planActionDate)) > 0 ?formatDuring(Number(props.row.factActionDate)-Number(props.row.planActionDate)):''}</span>;
          }
        },
        {
          title: '热度/意向级别(前)',
          dataIndex: 'originalLevel',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('1519'),
          render: props => {
            return <span>{this.createDictText(props.row.originalLevel, '1519')}</span>;
          }
        },
        {
          title: '热度/意向级别(后)',
          dataIndex: 'factIntentLevel',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('1519'),
          render: props => {
            return <span>{this.createDictText(props.row.factIntentLevel, '1519')}</span>;
          }
        },
        {
          title: '跟进结果',
          dataIndex: 'actionStatus',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('1517'),
          render: props => {
            return <span>{this.createDictText(props.row.actionStatus, '1517')}</span>;
          }
        },
        {
          title: '跟进方式',
          dataIndex: 'actionModeName',
          align: 'center',
          filterType: 'input',
          // filterItems: this.createDictList('1516'),
          // render: props => {
          //   return <span>{this.createDictText(props.row.planActionMode, '1516')}</span>;
          // }
        },
        {
          title: '预约时间',
          dataIndex: 'bookingDate',
          width: 200,
          align: 'center',
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.bookingDate) } </span>
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '跟进备注',
          dataIndex: 'taskName',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '本次跟进情形',
          dataIndex: 'scene',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '跟进批注',
          dataIndex: 'markup',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 客流记录
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '进店时间',
          dataIndex: 'arriveDate',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.arriveDate) } </span>
          }
        },
        {
          title: '离店时间',
          dataIndex: 'leaveTime',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.leaveTime) } </span>
          }
        },
        {
          title: '接待时长',
          dataIndex: 'time',
          align: 'center',
          render: props =>{
            let time = ''
            if(props.row.leaveTime-props.row.arriveDate > 0){
              time = props.row.leaveTime-props.row.arriveDate
            }
            return <span>{ time > 0?formatDuring(time):"" } </span>
          }
        },
        {
          title: '人数',
          dataIndex: 'arrivePeopleNum',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '进店类型',
          dataIndex: 'passengerFlowType',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('7003'),
          render: props => {
            return <span>{this.createDictText(props.row.passengerFlowType, '7003')}</span>;
          }
        },
        {
          title: '接待人',
          dataIndex: 'consultantName',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 试驾记录
    createTableColumns3() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '开始时间',
          dataIndex: 'driveSAt',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.driveSAt) } </span>
          }
        },
        {
          title: '结束时间',
          dataIndex: 'driveEAt',
          width: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.driveEAt) } </span>
          }
        },
        {
          title: '试驾类型',
          dataIndex: 'driveType',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('2026'),
          render: props => {
            return <span>{this.createDictText(props.row.driveType, '2026')}</span>;
          }
        },
        {
          title: '开始里程(KM)',
          dataIndex: 'driveSKm',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '结束里程(KM)',
          dataIndex: 'driveEKm',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '试驾总里程(KM)',
          dataIndex: 'allMilliage',
          align: 'center',
          filterType: 'input',
          render: props =>{
            let allMilliage = ''
            if(props.row.driveEKm - props.row.driveSKm > 0){
              allMilliage = Math.floor(props.row.driveEKm*10 - props.row.driveSKm*10) / 10
              // allMilliage = props.row.driveEKm - props.row.driveSKm
            }
            return <span>{ allMilliage }</span>
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 报价记录
    createTableColumns4() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '报价时间',
          dataIndex: 'createdAt',
          minWidth: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.createdAt) } </span>
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input'
        },
      ];
    },
    // 订单记录
    createTableColumns5() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '销售订单号',
          dataIndex: 'viNo',
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          filterType: 'input'
        },
        {
          title: '开单时间',
          dataIndex: 'createdAt',
          minWidth: 150,
          filterType: 'input',
          render: props =>{
            return <span>{ formatDates(props.row.createdAt) } </span>
          }
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          minWidth: 100,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          minWidth: 100,
          filterType: 'input'
        },
        {
          title: '配置',
          dataIndex: 'packageName',
          minWidth: 240,
          filterType: 'input'
        },
        {
          title: '颜色',
          dataIndex: 'colorName',
          minWidth: 150,
          filterType: 'input'
        },
        // {
        //   title: '内饰色',
        //   dataIndex: 'trimColorName',
        //   filterType: 'input'
        // },
        {
          title: '购买台次',
          dataIndex: 'buyNum',
          filterType: 'input'
        },
        {
          title: '订单状态',
          dataIndex: 'viStatus',
          filterType: 'checkbox',
          filterItems: this.createDictList('1404'),
          render: props => {
            return <span>{this.createDictText(props.row.viStatus, '1404')}</span>;
          }
        },
        {
          title: '所属顾问',
          dataIndex: 'consultantName',
          filterType: 'input'
        },
      ];
    },
    // 回访记录
    createTableColumns6() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '计划回访时间',
          dataIndex: 'planCareDate',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '实际回访时间',
          dataIndex: 'actualCareDate',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '回访方式',
          dataIndex: 'careWay',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '是否逾期',
          dataIndex: 'overdue',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '逾期时长',
          dataIndex: 'overdueDate',
          align: 'center',
          // render: props =>{
          //   return <span>{ formatDuring(props.row.leaveTime-props.row.arriveDate) } </span>
          // }
        },
        {
          title: '是否完成',
          dataIndex: 'whetherFinish',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '所属顾问',
          dataIndex: 'employeeId',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'customerFeedback',
          align: 'center',
          filterType: 'input'
        }
      ];
    },
    // 审批记录
    createTableColumns7() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '申请类型',
          dataIndex: 'actionType',
          align: 'center',
          filterType: 'checkbox',
          filterItems: this.createDictList('7021'),
          render: props => {
            return <span>{this.createDictText(props.row.actionType, '7021')}</span>;
          }
        },
        {
          title: '申请人',
          dataIndex: 'consultant',
          align: 'center',
          filterType: 'input',
        },
        {
          title: '申请时间',
          dataIndex: 'createdAt',
          minWidth: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.createdAt) } </span>
          }
        },
        {
          title: '申请原因',
          dataIndex: 'reason',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '审批人',
          dataIndex: 'reviewPerson',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '审批时间',
          dataIndex: 'reviewDate',
          minWidth: 150,
          align: 'center',
          render: props =>{
            return <span>{ formatDates(props.row.reviewDate) } </span>
          }
        },
        {
          title: '审批结果',
          dataIndex: 'reviewStatus',
          align: 'center',
          filterType: 'input'
        },
        {
          title: '审批备注',
          dataIndex: 'reviewOpinion',
          minWidth: 150,
          align: 'center',
          filterType: 'input'
        }
      ];
    }
  }
}
</script>

<style lang="less" scoped>

</style>
